<template>
<div>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <el-row>
                    <el-col :span="10">玩家ID: {{ data.playerId }}</el-col>
                    <el-col :span="10">昵称：{{ data.nickname }}</el-col>
                </el-row>
                <el-row class="mt-20">
                    <el-col :span="10">账号：{{ data.username }}</el-col>
                    <el-col :span="10">最后登录：{{ data.login_at }}</el-col>
                </el-row>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleSearch">
                <el-tab-pane label="英雄" name="hero"></el-tab-pane>
                <el-tab-pane label="装备" name="equip"></el-tab-pane>
                <el-tab-pane label="道具" name="prop"></el-tab-pane>
                <el-tab-pane label="宠物" name="pet"></el-tab-pane>
                <el-tab-pane label="符文" name="rune"></el-tab-pane>
            </el-tabs>
            <div>
                <el-table
                    ref="dTable"
                    :data="tableData"
                    v-loading="loading"
                    border
                    style="width: 100%">
                    <el-table-column
                        v-for="(item, index) in tableHeader"
                        :key="index"
                        :prop="item[0]"
                        :label="item[1]"
                        :resizable="true"
                        :width="(index === 0 || item[0].includes('Time')) ? '150' : ''">
                        <template v-slot:default="{ row }">
                            <span v-if="item[0] === 'MId'">
                                {{ row[item[0]] + ') ' + items[row[item[0]]] }}
                            </span>

                            <span v-else-if="item[0] === 'Type'">
                                {{ itemOptions.type[row[item[0]]].label ?? '' }}
                            </span>

                            <span
                                v-else-if="item[0] === 'Status'"
                                :style="{
                                    color: ['有效', '装备', '使用中'].indexOf(row[item[0]]) > -1
                                    ? 'green'
                                    : 'red' }"
                            >
                                {{ row[item[0]] }}</span>

                            <span v-else-if="item[0] === 'Enable'"
                                  :style="{
                                    color: ['启用', '有效'].indexOf(row[item[0]]) > -1
                                    ? 'green'
                                    : 'red' }"
                            >
                                {{ row[item[0]] }}
                            </span>
                            <span v-else>{{ row[item[0]] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</div>

</template>


<script>
export default {
    props: {
        data: {}
    },
    data() {
        return {
            loading: false,
            form: {},
            activeName: 'hero',
            tableHeader: [],
            tableData:[],
            itemOptions: this.$store.state.item.options,
        };
    },
    computed: {
        items() {
            return this.$store.state.item.allName;
        },
    },
    methods: {
        handleSearch(tab) {
            this.$store.dispatch('user/Asset', {
                playerId: this.$props.data.playerId,
                type: tab.name
            }).then(res => {
                this.tableData = res.data.data.content;
                this.tableHeader = res.data.data.header;
            }).finally(() => {
                this.loading = false;
            });
        },
    },
    created() {
        this.handleSearch({name: 'hero'})
    }
};
</script>
